<template>
    <view class="loseWeightContrast">
        <view v-for="(item, index) in list" :key="item.id" class="contrastItem">
            <view class="contrastTitle">
                {{ item.titleName || "" }}
            </view>
            <view class="contrastArea">
                <view class="contrastDataLong">
                    <view class="contrastDataItem">
                        <Text class="dataLabel">减重套餐：</Text>
                        <Text class="dataValue">{{ filterWeightPackage(item.weightPackage) }}</Text>
                    </view>
                    <view class="contrastDataItem">
                        <Text class="dataLabel">减重体型：</Text>
                        <Text class="dataValue">{{ item.weightBodyShape || "" }}</Text>
                    </view>
                </view>
                <view class="contrastData">
                    <view class="contrastDataItem">
                        <Text class="dataLabel">减重重量：</Text>
                        <Text class="dataValue">{{ item.weightGoal || "" }}斤</Text>
                    </view>
                    <view class="contrastDataItem">
                        <Text class="dataLabel">减重时间：</Text>
                        <Text class="dataValue">{{ item.weightDays || "" }}天</Text>
                    </view>
                </view>
            </view>
            <view class="contrastImgArea">
                <view class="contrastImg">
                    <image :src="request.baseUrl + item.photoBeforeWeight" mode="scaleToFill" class="contrastImg">
                    </image>
                    <image
                        src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/home/loseWeightBefore.png"
                        mode="scaleToFill"
                        class="contrastTagImg"
                    >
                    </image>
                </view>
                <view class="contrastImg">
                    <image :src="request.baseUrl + item.photoAfterWeight" mode="scaleToFill" class="contrastImg">
                    </image>
                    <image
                        src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/home/loseWeightAfter.png"
                        mode="scaleToFill"
                        class="contrastTagImg"
                    >
                    </image>
                </view>
            </view>
            <view class="contrastFooter">
                <button open-type="share" class="shareButton" @click="toShare(item)">
                    <image
                        src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/home/loseWeightShare.png"
                        mode="scaleToFill"
                        style="display: block"
                        class="contrastFooterIcon"
                    >
                    </image>
                </button>

                <view class="contrastFooterIcon" @click="giveLike(item)">
                    <image
                        v-show="item.hasThumbs"
                        src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/home/loseWeightFanv.png"
                        mode="scaleToFill"
                        class="contrastFooterIcon"
                    >
                    </image>
                    <image
                        v-show="!item.hasThumbs"
                        src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/dynamic_menu_good.png"
                        mode="scaleToFill"
                        class="contrastFooterIcon"
                    >
                    </image>

                    <view class="fanvNumber" v-show="!!item.thumbsCount">
                        {{ item.thumbsCount > 999 ? "999+" : item.thumbsCount }}
                    </view>
                    <view class="fanvNumber" v-show="!item.thumbsCount"> 0 </view>
                </view>
            </view>
        </view>
        <view v-if="list.length == 0 && isloading == false" class="emptyArea">
            <image
                style="width: 316rpx; height: 316rpx; margin-top: 214rpx"
                src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/comments_null.png"
            ></image>
            <label style="margin-top: 28rpx; color: #272a37; font-weight: 600; font-size: 32rpx; line-height: 44rpx"
                >暂无数据</label
            >
        </view>
    </view>
</template>

<script>
import request from "@/common/api/request.js";
import utils from "@/common/utils.js";

export default {
    name: "loseWeightContrast",
    data() {
        return {
            request,
            isloading: false,
            list: [],
            queryParams: {
                pageNum: 1,
                pageSize: 2,
            },
            shareItem: {},
            noMore: false,
            requestLoading: false,
        };
    },
    onLoad() {
        this.getList();
    },
    onPullDownRefresh() {
        this.noMore = false;
        this.queryParams.pageNum = 1;
        this.getList();
    },
    onReachBottom() {
        if (this.noMore) {
            return;
        }
        this.queryParams.pageNum += 1;
        this.getList();
    },
    methods: {
        filterWeightPackage(weightPackageStr) {
            if (!weightPackageStr) {
                return "";
            }
            if (weightPackageStr.length > 9) {
                const showStr = weightPackageStr.slice(0, 9);
                return `${showStr}...`;
            }
            return weightPackageStr;
        },
        async getList() {
            if (this.noMore) {
                return;
            }
            this.isloading = true;
            try {
                const { data } = await this.request.httpTokenJsonRequest(
                    "/mp-api/wx/contrast/list",
                    this.queryParams,
                    "POST",
                );
                this.list = utils.filterRepetition([...this.list, ...data.list]);
                if (data.total <= this.list.length) {
                    this.noMore = true;
                }
            } catch (e) {}
            this.isloading = false;
        },
        async giveLike(data) {
            if (this.requestLoading) {
                return;
            }
            this.requestLoading = true;
            try {
                await this.request.httpTokenJsonRequest(`/mp-api/wx/contrast/change/${data.id}`, null, "POST");
                if (data.hasThumbs) {
                    uni.showToast({
                        title: "取消点赞成功",
                        icon: "success",
                    });
                    data.thumbsCount--;
                } else {
                    uni.showToast({
                        title: "点赞成功",
                        icon: "success",
                    });
                    data.thumbsCount++;
                }
                data.hasThumbs = !data.hasThumbs;
            } catch (e) {}
            setTimeout(() => {
                this.requestLoading = false;
            }, 100);
        },
        toShare(data) {
            this.shareItem = data;
        },
    },
    async onShareAppMessage(res) {
        let title = "倾意纤养减重案例    与优秀的倾意家人同行，必粘仙气";
        let imageUrl =
            "https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/profile/upload/2024/06/04/0dc4bfd1-6bc5-4f1b-9c8f-8e4b7eba3d98.jpg";
        if (res.from === "button") {
            title = this.shareData.shareDescription;
            imageUrl = this.request.baseUrl + this.shareData.sharePhotos;
        }
        return {
            title,
            imageUrl,
            path: "/packageHome/pages/loseWeightContrast/index",
            success(res) {
                uni.showToast({
                    title: "分享成功",
                    icon: "none",
                });
            },
            fail(res) {
                uni.showToast({
                    title: "分享失败",
                    icon: "none",
                });
            },
        };
    },
    computed: {
        shareData() {
            return this.shareItem;
        },
    },
};
</script>

<style lang="scss" scoped>
.loseWeightContrast {
    min-height: 100%;
    background-color: #ffffff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;

    .contrastItem {
        font-size: 28rpx;
        color: #333333;
        margin-bottom: 30rpx;
        padding-bottom: 38rpx;

        &:not(:last-child) {
            border-bottom: 1rpx solid #f1f1f1;
        }
    }

    .contrastTitle {
        margin-bottom: 20rpx;
        font-weight: 500;
        line-height: 40rpx;
    }

    .contrastArea {
        display: flex;
        margin-bottom: 30rpx;
    }

    .contrastDataLong {
        flex: 1;
    }

    .contrastDataItem {
        display: flex;
        align-items: center;
        height: 40rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        line-height: 40rpx;

        &:first-child {
            margin-bottom: 12rpx;
        }
    }

    .dataLabel {
        color: #999999;
    }

    .contrastDataLong {
        .dataValue {
            width: 280rpx;
        }
    }

    .dataValue {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
    }

    .contrastImgArea {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20rpx;

        .contrastImg {
            position: relative;
            width: 328rpx;
            height: 438rpx;
            border-radius: 18rpx;
        }

        .contrastTagImg {
            position: absolute;
            top: 0;
            right: 0;
            width: 104rpx;
            height: 42rpx;
        }
    }

    .contrastFooter {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 10rpx;

        .shareButton {
            margin: 0;
            padding: 0;
            height: 56rpx;
            background-color: transparent;
        }

        .contrastFooterIcon {
            position: relative;
            width: 56rpx;
            height: 56rpx;
        }

        > .contrastFooterIcon {
            margin-left: 56rpx;
        }

        .fanvNumber {
            position: absolute;
            left: 34rpx;
            top: 32rpx;
            height: 32rpx;
            font-size: 22rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ff6f89;
            line-height: 32rpx;
            background-color: #ffffff;
            border-radius: 8rpx;
            padding-left: 4rpx;
        }
    }

    .emptyArea {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
</style>
